<template>
  <div>
    <template v-for="item in data" :key="item.id">
      <el-sub-menu v-if="item.children?.length" :index="item.id">
        <template #title>
          <i :class="item.icon"></i>
          <span style="margin-left: 10px;">{{ item.name }}</span>
        </template>
        <TreeMenu :data="item.children"/>
      </el-sub-menu>
      <el-menu-item v-else :index="item.id">
        <i :class="item.icon"></i>
        <span style="margin-left: 10px;">{{ item.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>


<script setup>
import TreeMenu from './tree_menu.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

defineProps({
  data: Array
})

const resolveIcon = (iconName) => {
  return ElementPlusIconsVue[iconName] || 'span'
}
</script>
<style scoped lang="scss">
// 隐藏文字
.el-menu--collapse .el-sub-menu__title span {
  display: none;
}

// 隐藏 >
.el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: none;
}

.menu-icon {
  width: 13px;
  height: 13px;
  margin-right: 5px;
}

</style>
